"use client"
import React from "react"
import { Card } from "antd"
import Title from "antd/es/typography/Title"
import TagList from "../tag-list"
import MdViewer from "../md-viewer"
import useAddUserSignInRecord from "@/hooks/useAddUserSignInRecord"
import "./index.css"

interface Props {
  question: QuestionVO
}

/**
 * 题目详情
 *
 * @param props
 */
const QuestionCard: React.FC<Props> = (props) => {
  const { question } = props

  // 添加签到记录
  useAddUserSignInRecord()

  return (
    <div className="question-card">
      <Card>
        <Title level={1} style={{ fontSize: 24 }}>
          {question.title}
        </Title>
        <TagList tags={question.tagList} />
        <div style={{ marginBottom: 16 }} />
        <MdViewer value={question.content} />
      </Card>
      <div style={{ marginBottom: 16 }}></div>
      <Card title="推荐答案">
        <MdViewer value={question.answer} />
      </Card>
    </div>
  )
}

export default QuestionCard
